import React from 'react';
import classnames from 'classnames';
import css from './index.less';
//import { Menu, Dropdown, Button, Icon, message } from 'antd';
import { Input, InputNumber, Form, Modal, Select, Alert, Button, Col } from 'antd';
const Option = Select.Option;
const InputGroup = Input.Group;
const { TextArea } = Input;

class MyModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmLoading: false,
      content: ''
    };
  }

  handleOk() {
    const {addMess = () => {} } = this.props;
    const { content } = this.state;
      this.setState({confirmLoading: true});
      const that = this;
      Modal.confirm({
        title: 'Confirm',
        content: '您确认提交您的数据么？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          addMess(content);
          that.setState({
            confirmLoading: false,
            visible: false
          });
        },
        onCancel() {
          that.setState({
            confirmLoading: false
          });
        }
      });
  };

  handleCancel()  {
    const { closeModal = () => {} } = this.props;
    closeModal();
  };

  onInputChange(e) {
    this.setState({
      content: e.target.value
    });
  }

  render() {
    const { confirmLoading, content } = this.state;
    const { visible } = this.props;
    const modalProps = {
      title: '添加系统消息',
      visible,
      confirmLoading,
      onOk: this.handleOk.bind(this),
      onCancel: this.handleCancel.bind(this)
    };
    const textareaProps = {
      value: content,
      placeholder: "请输入。。。",
      onChange: this.onInputChange.bind(this),
      autosize: {
        minRows: 6,
        maxRows: 6
      }
    };
    return (
      <Modal {...modalProps}>
        <div className={css.editBox}>
          <form action="">
            <InputGroup className={css.inuptBox} size="large">
              <Col span={5}>
                <h4>消息内容：</h4>
              </Col>
              <Col offset={1} span={16}>
                <TextArea { ...textareaProps}/>
              </Col>
            </InputGroup>
          </form>
        </div>
      </Modal>
    );
  }
}

export default MyModal;
